<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 拷贝第三方库 lodash 的地址 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
    <script>
      const cat = {
        name: '加菲猫',
        food: {
          name: '鱼',
          friend: {
            name: '虾米',
            food: '汉堡包'
          }
        }
      }

      // 浅拷贝
      // 内存地址的重新复制
      // const newCat = cat
      // newCat.name = '英短'
      // console.log(cat.name)
      // console.log(newCat.name)

      // 第一层的深拷贝
      // 把 cat 的属性打开，丢到一个新对象中
      // 这种写法只能保证第一层是新的，内部还是原始对象
      // const newCat = { ...cat }
      // newCat.name = '美短'
      // console.log(cat.name)
      // console.log(newCat.name)

      // // 使用刚刚的写法，无法保证嵌套对象内部的深拷贝
      // newCat.food.name = '猫罐头'
      // console.log(newCat.food.name)
      // console.log(cat.food.name)

      // 前端开发中一个简单暴力的写法
      // 对象转字符串之后，和老对象没有关系了
      const jsonStr = JSON.stringify(cat) // obj->string
      // 字符串转对象 数据和老对象一样，但是生成了一个新的对象
      const newCat = JSON.parse(jsonStr) // string->obj
      newCat.food.friend.name = '狗狗'
      console.log(newCat)
      console.log(cat)

      // 前端开发中还有一些其他的深拷贝写法：
      // 1. 使用递归，判断对象的属性是什么，基本类型自己复制，复杂类型，创建一个新对象，复制数据（前端面试中，偶尔会出现，笔试题）
      // 2.可以使用一些第三方库，比如 lodash,cloneDeep可以拷贝出新的对象
      const newCatPro = _.cloneDeep(cat)
      newCatPro.name = '汤姆猫'
      newCatPro.food.name = '杰瑞'
    </script>
  </body>
</html>
